<template>
  <NavBar title="点赞" backgroundColor="#161622">
    <template #left>
      <div class="left" @click="handleClick">
        <Icon name="zuojiantou" size="18" color="#fff"></Icon>
      </div>
    </template>
  </NavBar>
  <div class="fan">
    <!-- 粉丝列表 -->
    <div class="fan_list">
      <div class="fan_item" v-for="item in likeList" :key="item.userId">
        <div class="avatar">

          <img :src="item.userAvatar" @error="e => e.target.src = item._fallback" loading="lazy" alt="">
        </div>
        <div class="info">
          <div class="name">
            @{{ item.userNickname }}
          </div>
          <div class="desc">
            赞了你的视频
          </div>
          <div class="time">
            {{ item.formattedTime }}
          </div>
        </div>
        <div class="follow">
          <img :src="item.videoCover" @error="e => e.target.src = item._fallback" loading="lazy" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getLikeListAPI } from '@/api/message'
import { useDateFormat } from '@/composables/useDateFormat'
import NavBar from '@/components/Common/NavBar/index.vue'
import Icon from '@/components/Common/Icon/index.vue'
import { useRouter } from 'vue-router'
import { useUserIDStore } from '@/stores/UserID'

// 路由
const router = useRouter()

// 用户 ID
const userIDStore = useUserIDStore()
const userId = userIDStore.userInfo?.userId

// 点赞列表
const likeList = ref([])

// 返回消息页
const handleClick = () => {
  router.push({ name: 'message' })
}

// 默认头像图片数组（你提供的地址）
const defaultAvatars = [
  'https://img0.baidu.com/it/u=2995054883,4058579845&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1427',
  'https://img2.baidu.com/it/u=1436631956,3865584376&fm=253&app=138&f=JPEG?w=500&h=889',
  'https://b0.bdstatic.com/ugc/XVOkm-5w29XUzs-4OFKInw38fe0bc1efc2327dcaab46e1d1ce5fe5.jpg',
  'https://b0.bdstatic.com/ugc/XVOkm-5w29XUzs-4OFKInwa53b271f4a38bdd99e20383e4d2984ad.jpg',
  'https://img2.baidu.com/it/u=1786458666,220231330&fm=253&app=138&f=JPEG?w=800&h=1169'
]

// 随机获取一个默认图片
const getRandomDefaultAvatar = () => {
  const randomIndex = Math.floor(Math.random() * defaultAvatars.length)
  return defaultAvatars[randomIndex]
}

// 获取点赞列表
const getLikeList = async () => {
  try {
    const res = await getLikeListAPI(userId)
    if (res.code === 200) {
      likeList.value = res.data.map(item => {
        // 为每个 item 预分配一个固定的 fallback 图
        const fallback = getRandomDefaultAvatar()

        return {
          ...item,
          // 用户头像：如果不存在，就直接用 fallback
          userAvatar: item.userAvatar
            ? 'http://43.138.15.137:3000' + item.userAvatar
            : fallback,
          // 视频封面：如果不存在或无效，也用 fallback
          videoCover: item.videoCover
            ? item.videoCover.includes('http://localhost:3000')
              ? item.videoCover.replace('http://localhost:3000', 'http://43.138.15.137:3000')
              : item.videoCover
            : fallback,
          formattedTime: useDateFormat(item.createdAt, 'YYYY-MM-DD', { relative: true }).formatted,
          // （可选）保留 fallback 字段，用于 error 处理
          _fallback: fallback
        }
      })
    }
  } catch (error) {
    console.error('获取点赞列表失败:', error)
  }
}

// 挂载时获取数据
onMounted(() => {
  getLikeList()
})
</script>

<style lang="scss" scoped>
.fan {
  background-color: #161622;
  padding-bottom: 35px;

  .fan_list {
    padding: 10px;

    .fan_item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .info {
        flex: 1;


        .name {
          font-size: 14px;
          font-weight: bold;
          line-height: 1;
          color: #fff;
        }

        .desc {
          font-size: 14px;
          color: #fff;
          margin-bottom: 5px;
          font-weight: bold;
        }

        .time {
          font-size: 12px;
          font-weight: bold;
          color: #879394;
        }
      }

      .follow {
        // width: 60px;
        // height: 24px;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        border-radius: 4px;
        overflow: hidden;


        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;

        }
      }
    }
  }
}
</style>